<template>
    <view class="container">
        <block v-if="isRelieve">
            <view class="input-item">
                <u-input
                    placeholder="请填写手机号"
                    border="bottom"
                    fontSize="28rpx"
                    v-model="mobile"
                ></u-input>
            </view>
            <view class="input-item">
                <u-input
                    placeholder="请输入验证码"
                    border="bottom"
                    fontSize="28rpx"
                    v-model="code"
                >
                    <template slot="suffix">
                        <u-code
                            ref="uCode"
                            @change="codeChange"
                            changeText="重新发送(Xs)"
                            @end="end"
                        ></u-code>
                        <view :class="btn_disenble? 'btn-code-disenble':'btn-code'" @click="getCode">
                            {{ tips }}
                        </view>
                    </template>
                </u-input>
            </view>
            <view class="bottom">
                <u-button 
                    text="确认绑定"
                    class="custom-style"
                    :customStyle="{
                        background: '#000000',
                        color: '#ffffff'
                    }"
                    @click="onsubmit"
                ></u-button>
            </view>
        </block>
        <block v-else>
            <view class="logo"></view>
            <view class="bottom">
                <u-button 
                    text="获取手机号码"
                    class="custom-style"
                    :customStyle="{
                        background: '#000000',
                        color: '#ffffff'
                    }"
                    open-type="getPhoneNumber" 
                    @getphonenumber="decryptPhoneNumber"
                ></u-button>
            </view>
        </block>
    </view>
</template>
<script>
import { getBindCode,userBindMobile,userBindPhone } from "@/config/api"
export default {
    data() {
        return {
            tips: "发送验证码",
            btn_disenble: false,
            mobile: null,
            code: null,
            isRelieve: false
        }
    },
    onLoad(option) {
        this.isRelieve = option.isRelieve
    },
    methods: {
        codeChange(text) {
            this.tips = text
        },
        async getCode() {
            uni.showLoading({
                title: '正在发送验证码'
            })
            const res = await getBindCode({
                mobile: this.mobile
            },
            {
                custom: { auth: true}
            })
            uni.$u.toast('验证码已发送');
            this.$refs.uCode.start();
            this.btn_disenble = true
        },
        end() {
            this.btn_disenble = false
        },
        async onSubmit() {
            uni.showLoading()
            const res = await userBindMobile({
                mobile: this.mobile,
                code: this.code
            },
            {
                custom: { auth: true}
            })
            this.$store.dispatch("user/setPhone", res.mobile)
            uni.$u.toast('绑定成功');
            uni.$u.route({
                type: "navigateBack"
            })
        },
        decryptPhoneNumber(data) {
            var detail = data.detail
            if (detail.errMsg == "getPhoneNumber:ok") {
                userBindPhone({encryptedData: detail.encryptedData, iv: detail.iv}).then(res => {
                    this.$store.dispatch("user/setPhone", res.mobile)
                    uni.$u.route({
                        type: "navigateBack"
                    })
                })
            }
        }
    }
}
</script>
<style lang="scss" scoped>
    .container {
        box-sizing: border-box;
        padding: 0 40rpx;
        .logo {
            width: 300rpx;
            height: 300rpx;
            background: url(https://ionepin.oss-cn-shenzhen.aliyuncs.com/ionepin_logo.png) no-repeat;
            background-size: 100% 100%;
            border-radius: 50%;
            margin: 120rpx auto 0 auto;
        }
        .input-item {
            margin-top: 40rpx;
            .btn-code {
                width: 180rpx;
                height: 56rpx;
                border-radius: 2rpx;
                border: 1rpx solid #000000;
                text-align: center;
                line-height: 56rpx;
                font-size: 24rpx;
            }
            .btn-code-disenble {
                width: 180rpx;
                height: 56rpx;
                border-radius: 2rpx;
                color: #888888;
                border: 1rpx solid #999999;
                text-align: center;
                line-height: 56rpx;
                font-size: 24rpx;
            }
        }
        .bottom {
            position: fixed;
            box-sizing: border-box;
            width: 100%;
            padding: 0 20rpx;
            bottom: 33rpx;
            left: 0;
        }
    }
</style>